<template>
  <el-dialog title="监测点位选择" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <el-form>
      <el-checkbox-group v-model="monPos" size="small">
        <el-checkbox
          v-for="(item,index) in tabs"
          v-bind:key="index"
          :label="item.test"
          border
          style="margin-top:20px"
        ></el-checkbox>
      </el-checkbox-group>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="fullSelect(monPos)">{{ btnClearName }}</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: [
    'dialogFormVisible1',
    'monPos1'
    // monPos: Array
  ],
  computed: {
    btnClearName () {
      return !this.clearOnOff ? '全 选' : '全清除'
    },
    // monPos() {
    //   return this.testModel
    // }
    dialogFormVisible: {
      get: function () {
        return this.dialogFormVisible1
      },
      set: function (newValue) {
        this.dialogFormVisible1 = newValue
      }
    },
    monPos: {
      get: function () {
        return this.monPos1
      },
      set: function (newValue) {
        this.monPos1 = newValue
      }
    }
  },
  data () {
    return {
      // monPos: this.monPos1,
      // dialogFormVisible: this.dialogFormVisible1,
      tabs: [
        { test: '101' },
        { test: '102' },
        { test: '103' },
        { test: '104' },
        { test: '105' },
        { test: '106' },
        { test: '107' },
        { test: '108' },
        { test: '109' },
        { test: '110' },
        { test: '111' },
        { test: '112' },
        { test: '113' },
        { test: '114' },
        { test: '115' }
      ],
      clearOnOff: false
    }
  },
  methods: {
    fullSelect (data) {
      if (!this.clearOnOff) {
        this.tabs.forEach(e => {
          data.push(e.test)
        })
      } else {
        data.splice(0, data.length)
      }
      this.clearOnOff = !this.clearOnOff
    }
  }
}
</script>

<style scoped>
</style>
